<template>
  <el-form label-width="96px" ref="reg_data_ref" :rules="reg_data_rules" :model="info_modal.form_data">
    <div class="box">
      <h3>人员个人信息</h3>
      <el-form-item label="姓名" prop="studentName">
        <el-input placeholder="请输入姓名" v-model.trim="info_modal.form_data.studentName" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="info_modal.form_data.gender" class="ml-4">
          <el-radio label="0" size="large">女</el-radio>
          <el-radio label="1" size="large">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="证件照" prop="documentImg">
        <el-text>本人近 1 年内正面、免冠、无妆、彩色电子证件照（白色 / 蓝色背景，用于证件照片）</el-text>
        <UploadImage v-model="info_modal.form_data.documentImg" />
      </el-form-item>
      <el-form-item label="证件类型" prop="documentType">
        <el-select v-model="info_modal.form_data.documentType">
          <el-option label="身份证" value="idcard"></el-option>
          <el-option label="护照" value="passport"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="documentNumber">
        <el-input placeholder="请输入证件号码" v-model="info_modal.form_data.documentNumber" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input placeholder="请输入手机号码" v-model="info_modal.form_data.phone" />
      </el-form-item>
      <el-form-item label="城市赛积分" prop="cityIntegral">
        <el-input placeholder="请输入城市赛积分" type="number" v-model="info_modal.form_data.cityIntegral" />
      </el-form-item>
      <el-form-item label="锦标赛积分" prop="championship">
        <el-input placeholder="请输入锦标赛积分" type="number" v-model="info_modal.form_data.championship" />
      </el-form-item>
      <el-form-item label="奖项" prop="awards">
        <el-select v-model="info_modal.form_data.awards">
          <el-option label="一等奖" value="一等奖"></el-option>
          <el-option label="二等奖" value="二等奖"></el-option>
          <el-option label="三等奖" value="三等奖"></el-option>
          <el-option label="优秀奖" value="优秀奖"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="box">
      <h3>所属学校与地区</h3>
      <el-form-item label="所属学校" prop="schoolName">
        <el-input placeholder="请输入所属学校" v-model="info_modal.form_data.schoolName" />
      </el-form-item>
      <el-form-item label="所属市区" prop="county">
        <ProvinceSelect :isW="true" v-model:economize="info_modal.form_data.economize"
          v-model:market="info_modal.form_data.market" v-model:county="info_modal.form_data.county" :showCounty="true" />
      </el-form-item>
    </div>
    <div class="box">
      <el-form-item>
        <el-button type="primary" size="large" @click="handleSubmit" color="#1964d6">保存信息</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script  setup>
import ProvinceSelect from "@/components/province-select/index.vue"
import UploadImage from "@/components/upload-image/index.vue"
import { GetStudentInfoApi, PlayerEntryApi } from "@/api/manage/institution"
import { ref } from "vue";
import { ElMessage } from "element-plus"

const emit = defineEmits(['sub'])
const checkPhone = (rule, value, callback) => {
  const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
  if (!value) {
    callback(new Error('手机号码不能为空'))
  }
  if (phoneReg.test(value)) {
    callback()
  } else {
    callback(new Error('手机号码格式错误'))
  }
}
/**
 * 信息弹窗数据
 */
const info_modal = ref({
  form_data: {
    gender: "1"
  }
})
const handleRest = () => {
  info_modal.value.form_data = {
    gender: "1"
  }
}
/**
 * 获取学生信息
 */
const handleGetInfo = async (row) => {
  let res = await GetStudentInfoApi({
    studentId: row.studentId
  })
  if (res.success) {
    info_modal.value.form_data = res.entity;
  }
}

// 规则
const reg_data_ref = ref();
const reg_data_rules = ref({
  studentName: [
    {
      type: 'string',
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    }
  ],
  gender: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'blur',
    }
  ],
  documentImg: [
    {
      type: 'string',
      required: true,
      message: '请上传证件照',
      trigger: 'blur',
    }
  ],
  documentType: [
    {

      required: true,
      message: '请选择证件类型',
      trigger: 'blur',
    }
  ],
  documentNumber: [
    {
      required: true,
      message: '请输入证件号码',
      trigger: 'blur',
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号码',
      trigger: 'blur',
      validator: checkPhone,
    }
  ],
  schoolName: [
    {
      required: true,
      message: '请输入所属学校',
    }
  ],
  county: [
    {
      required: true,
      message: '请选择所属市区',
    }
  ],
});

/**
 * 保存信息
 */
const handleSubmit = async () => {
  reg_data_ref.value.validate(async (v, rule) => {

    if (!v) {
      return;
    }
    let res;
    res = await PlayerEntryApi(info_modal.value.form_data);
    if (res.success) {
      ElMessage.success(res.message);
      emit('sub', res)
    } else {
      ElMessage.error(res.message)
    }
  })
}



defineExpose({
  handleGetInfo,
  handleRest
})
</script>

<style lang="scss" scoped>
.box {
  padding-bottom: 32px;
  padding-left: 32px;
  width: 640px;

  h3 {
    margin-bottom: 16px;
  }
}
</style>